<template>
  <div v-loading="queueLoading" class="doccontainer" ref="containerRef" curPageName="doccontainer12323213131">
    <!-- v-if="dropdownList" -->

    <div v-show="!emptyData&&!initData">
      <div class="title" v-if="dropdownList.length>1">
        <div class="title-text">
          <span class="icon_tip">
            <el-icon><Document /></el-icon
          ></span>

          <el-dropdown class="dropdown_documeent" trigger="click" @command="handleCommand" :teleported="false" :max-height="500">
            <span class="el-dropdown-link" style="font-size: 16px">
              {{ certifyObj?.goods_certify_no }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(dItem, dIndex) in dropdownList"
                  :key="dIndex"
                  :command="dItem.goods_certify_id"
                  :class="{ activeClass: dItem.goods_certify_id == certifyObj?.goods_certify_id }"
                >
                  {{ dItem.goods_certify_no }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div> 
      <el-scrollbar ref="scrollRef"  :height="`calc(100vh - ${dropdownList.length>1?'190px':'120px'})`">
        <MerakCollapse v-model="collapseActive">
          <MerakCollapseItem :name="CollapseItem.base" :title="collapseTitle[CollapseItem.base]" hideMarker>
            <Base ref="baseRef" :queueId="queueId" :productId="productId" />
          </MerakCollapseItem>
          <MerakCollapseItem :name="CollapseItem.brand" hideMarker>
            <template #title>
              <span>{{ collapseTitle[CollapseItem.brand] }}</span>
              <span class="remark">&nbsp;&nbsp;&#40;{{ $t("goods_allocation_merge.have") }}</span>
              <span class="remark orange">&nbsp;{{ brandRef?.recordNum ?? 0 }}&nbsp;</span>
              <span class="remark">{{ $t("goods_allocation_merge.records") }}&#41;</span>
            </template>
            <Brand ref="brandRef" :queueId="queueId" :productId="productId" />
          </MerakCollapseItem>
          <MerakCollapseItem :name="CollapseItem.factory" hideMarker>
            <template #title>
              <span>{{ collapseTitle[CollapseItem.factory] }}</span>
              <span class="remark">&nbsp;&nbsp;&#40;{{ $t("goods_allocation_merge.have") }}</span>
              <span class="remark orange">&nbsp;{{ factoryRef?.recordNum ?? 0 }}&nbsp;</span>
              <span class="remark">{{ $t("goods_allocation_merge.records") }}&#41;</span>
            </template>

            <Factory ref="factoryRef" :queueId="queueId" :productId="productId" />
          </MerakCollapseItem>
          <MerakCollapseItem :name="CollapseItem.enterprise" hideMarker>
            <template #title>
              <span>{{ collapseTitle[CollapseItem.enterprise] }}</span>
              <span class="remark">&nbsp;&nbsp;&#40;{{ $t("goods_allocation_merge.have") }}</span>
              <span class="remark orange">&nbsp;{{ enterpriseRef?.recordNum ?? 0 }}&nbsp;</span>
              <span class="remark">{{ $t("goods_allocation_merge.records") }}&#41;</span>
            </template>
            <Enterprise ref="enterpriseRef" :queueId="queueId" :productId="productId" />
          </MerakCollapseItem>
          <MerakCollapseItem :name="CollapseItem.annex" hideMarker>
            <template #title>
              <span>{{ collapseTitle[CollapseItem.annex] }}</span>
              <span class="remark">&nbsp;&nbsp;&#40;{{ $t("goods_allocation_merge.have") }}</span>
              <span class="remark orange">&nbsp;{{ annexRef?.recordNum ?? 0 }}&nbsp;</span>
              <span class="remark">{{ $t("goods_allocation_merge.records") }}&#41;</span>
            </template>

            <Annex ref="annexRef" :queueId="queueId" :productId="productId" />
          </MerakCollapseItem>
        </MerakCollapse>
      </el-scrollbar> 
     
    </div>
     <div class="empty" v-show="!initData&&emptyData">
        <div v-if="!!emptyData">
          <img :src="EmptyPng" style="object-fit: cover; height: 130px" />
        </div>
      </div>
  </div>
</template>

<script setup lang="ts" name="goodsDocumentCard">
import EmptyPng from "@/assets/images/empty.png";
import { getCurrentInstance, ref, reactive, onMounted, onActivated, onDeactivated, computed, watch, nextTick } from "vue";
import { getCertifyApi, getProductInfoApi } from "@/api/modules/goodsArchive/list/detail";
import useLoading from "@/hooks/useLoading";

import { ElScrollbar, ElButton } from "element-plus";

import { Edit } from "@element-plus/icons-vue";

import { MerakCollapse, MerakCollapseItem } from "@/components/MerakCollapse";

import Base from "./components/Base.vue";
import Brand from "./components/Brand.vue";
import Factory from "./components/Factory.vue";
import Enterprise from "./components/Enterprise.vue";
import Annex from "./components/Annex.vue";

import { ResultEnum } from "@/enums/httpEnum";
import { UserAuthType, getUserAuth } from "@/api/modules/user";
import { defaultRectTextureRenderContribution } from "@visactor/vtable/es/vrender";

const props = withDefaults(
  defineProps<{
    goodsId?: string;
    productId?: string;
  }>(),
  {}
);
const enum CollapseItem {
  base = "base",
  brand = "brand",
  factory = "factory",
  enterprise = "enterprise",
  annex = "annex"
}

const currentInstance = getCurrentInstance();

const { queueId, queueLoading } = useLoading();
const containerRef = ref<HTMLDivElement>();

const baseRef = ref<InstanceType<typeof Base>>();

const brandRef = ref<InstanceType<typeof Brand>>();
const factoryRef = ref<InstanceType<typeof Factory>>();
const enterpriseRef = ref<InstanceType<typeof Enterprise>>();
const annexRef = ref<InstanceType<typeof Annex>>();

const scrollRef = ref<InstanceType<typeof ElScrollbar>>();

const auth = ref<UserAuthType>({});

const ignoreScroll = ref(false);

const collapseActive = reactive([
  CollapseItem.base,
  CollapseItem.brand,
  CollapseItem.factory,
  CollapseItem.enterprise,
  CollapseItem.annex
]);

const collapseTitle = reactive({
  [CollapseItem.base]: currentInstance?.proxy?.$t("goods_document.base_info"),
  [CollapseItem.brand]: currentInstance?.proxy?.$t("goods_document.system_brand"),
  [CollapseItem.factory]: currentInstance?.proxy?.$t("goods_document.factory"),
  [CollapseItem.enterprise]: currentInstance?.proxy?.$t("goods_document.enterprise"),
  [CollapseItem.annex]: currentInstance?.proxy?.$t("goods_document.annex")
});

//获取基础信息
const initData=ref(true);//初始化数据
const emptyData = ref(false); //不为空
const dropdownList = ref([]); //computed(() => baseRef.value?.dropdownList);

const certifyObjCom = computed(() => baseRef.value?.dropdownList[0]);
const certifyObj = ref({});
// watch(
//   () => certifyObjCom.value,
//   newVal => {
//     certifyObj.value = newVal;
//   }
// );
//下拉选择
const handleCommand = val => {
  queueLoading.value = true;
  let newDropArr = dropdownList.value.filter(dItem => dItem.goods_certify_id == val);
  console.log(newDropArr);
  if (newDropArr.length) certifyObj.value = newDropArr[0];

  baseRef.value?.getCertify(certifyObj.value, "init");
  brandRef.value?.init(certifyObj.value, "init");
  factoryRef.value?.init(certifyObj.value, "init");
  enterpriseRef.value?.init(certifyObj.value, "init");
  annexRef.value?.init(certifyObj.value, "init");
  setTimeout(() => {
    queueLoading.value = false;
  }, 1500);
};

onMounted(async () => {
  getCertifyApi({ product_id: props.productId }, queueId.value).then(res => {
    let { code, data } = res;
    console.log(data);
    initData.value=false;//关闭初始化
    emptyData.value = true;
    if (ResultEnum.SUCCESS == code) {
      if (data.certifyList && data.certifyList.length) {
        emptyData.value = false;
        
        dropdownList.value = data.certifyList;
        certifyObj.value = data.certifyList[0];

        console.log(baseRef.value);
        baseRef.value?.getCertify(certifyObj.value, "init");
          brandRef.value?.init(certifyObj.value, "init");
          factoryRef.value?.init(certifyObj.value, "init");
          enterpriseRef.value?.init(certifyObj.value, "init");
          annexRef.value?.init(certifyObj.value, "init");
      }
    }
  });
});
onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  const ignoreTimer = setTimeout(() => {
    ignoreScroll.value = true;
    clearTimeout(ignoreTimer);
  }, 1000);
});

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  ignoreScroll.value = false;
});
</script>

<style scoped lang="scss">
@import url("./index.scss");
</style>
